@page
@{ Layout = "_LayoutApp"; }
@section Styles{
    <style>
        body {
            margin: 0;
            padding: 0;
        }
    </style>
}
<div class="p-3">
    <el-button class="rounded-0 w-100 mb-3 py-3" icon="el-icon-trophy" type="primary" v-on:click="btnSwichClick">
            <span v-if="currentPk==0">全部赛事</span>
            <span v-else>我的赛事</span>
        </el-button>

    <div v-if="currentPk==0">
        <div v-if="roomTotal>0">
            <el-card class="mb-3 rounded-0" v-for="room in roomList" shadow="never">
                <div v-on:click="btnViewRoomClick(room)">
                    <div class="text-center mb-3">
                        <span class="px-3 py-1 rounded-pill fs-6 card-icon">{{ room.mark }}</span>
                    </div>
                    <div class="d-flex justify-content-between align-items-center">
                        <div v-if="room.userId_A>0" class="text-center">
                            <div class="avatar avatar-lg">
                                <img :src="room.userA.avatarUrl || DEFAULT_AVATAR_URL" class="rounded-circle">
                            </div>
                            <div class="fs-6">
                                {{ room.userA.displayName }}
                            </div>
                            <div class="mt-2" v-if="room.winUserId>0">
                                <span v-if="room.winUserId===room.userId_A" class="text-success">胜</span>
                                <span v-else class="text-danger">负</span>
                            </div>
                        </div>
                        <div v-else>
                            <div class="avatar avatar-lg">
                                <img :src="DEFAULT_NOBODY_AVATAR_URL" class="rounded-circle">
                            </div>
                        </div>
                        <div class="text-warning">
                            <span>vs</span>
                        </div>
                        <div v-if="room.userId_B>0" class="text-center">
                            <div class="avatar avatar-lg">
                                <img :src="room.userB.avatarUrl || DEFAULT_AVATAR_URL" class="rounded-circle">
                            </div>
                            <div class="fs-6">
                                {{ room.userB.displayName }}
                            </div>
                            <div class="mt-2" v-if="room.winUserId>0">
                                <span v-if="room.winUserId===room.userId_B" class="text-success">胜</span>
                                <span v-else class="text-danger">负</span>
                            </div>
                        </div>
                        <div v-else>
                            <div class="avatar avatar-lg">
                                <img :src="DEFAULT_NOBODY_AVATAR_URL" class="rounded-circle">
                            </div>
                        </div>
                    </div>
                    <div class="text-center mt-3">
                        <span class="fs-6"><i class="bi bi-calendar3-event me-1 text-warning"></i> {{ room.beginDateTimeStr }}</span>
                    </div>
                </div>
            </el-card>
            <div class="my-5 text-center">
                <el-button class="rounded-0" size="small" icon="el-icon-refresh-right" v-if="roomList.length>0 && roomList.length<roomTotal" v-on:click="btnRoomLoadMoreClick" :loading="roomLoadMoreLoading">加载更多</el-button>
                <small v-else>没有更多了</small>
            </div>
            <div class="py-8"></div>
        </div>
        <div class="pt-8" v-else>
            <el-empty :image-size="88" description="暂无赛事"></el-empty>
        </div>
    </div>
    <div v-else>
        <div v-if="total>0">
            <div v-for="(pk,index) in list" v-on:click="btnViewClick(pk.id)">
                <el-card class="mb-3 rounded-0" shadow="never">
                    <div slot="header">
                        <span>{{ pk.name }}</span>
                    </div>
                    <div class="row align-items-center">
                        <div class="col">
                            <ul class="list-inline fw-light">
                                <li class="list-inline-item fs-5">
                                    <i class="bi bi-person me-2"></i>{{ pk.userTotal }}
                                </li>
                                <li class="list-inline-item fs-5">
                                    <span class="rounded-3 p-2 card-icon fw-bold">
                                        <span class="text-warning" v-if="pk.haveMe">需要参与</span>
                                        <span class="text-success" v-else>不需要参与</span>
                                    </span>
                                </li>
                            </ul>
                            <ul class="list-inline fw-light">
                                <li class="list-inline-item fs-5">
                                    <i class="bi bi-calendar3-event me-2 text-warning"></i>{{ pk.pkBeginDateTimeStr }}-{{ pk.pkEndDateTimeStr }}
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="mt-3 text-center">
                        <el-button type="primary" plain icon="el-icon-trophy" class="rounded-pill" v-on:click.stop="btnViewClick(pk.id)">赛 程</el-button>
                    </div>
                </el-card>
            </div>
            <div class="my-5 text-center">
                <el-button class="rounded-pill border-0" icon="el-icon-refresh-right" size="small" v-if="list.length>0 && list.length<total" v-on:click="btnLoadMoreClick" :loading="loadMoreLoading">加载更多</el-button>
                <small v-else>没有更多了</small>
            </div>
            <div class="py-8"></div>
        </div>
        <div class="pt-8" v-else>
            <el-empty :image-size="88" description="暂无赛事"></el-empty>
        </div>
    </div>
</div>
@section Scripts{
    <script src="/sitefiles/assets/js/app/exam/examPk.js" type="text/javascript"></script>
}